Challenge: Fix Zoom Issues with CSS
On this page
Responsiveness and zoom level accessibility go hand-in-hand. We can fix both with the same CSS media queries!
Work through the zoom issues identified on the Home and About pages, checking behavior as you go.
Adding the Viewport Meta Tag
In case you haven’t yet, add the viewport meta tag into the <head> section of the HTML for both the Home and About pages.
Do not disable user-scaling in the viewport meta tag! This will disallow pinch and zoom, which is a critical accessibility feature.
<meta name="viewport" content="initial-scale=1" />🛠 Solution: Changes in the Homepage Styles
Updating Global Layout Styles
The _layouts.scss file has some classes that split the page layout into two or three dynamic columns using CSS Grid.
There’s a two-parts-50-50 to split the width in half, and a two-parts-60-40 to have one side a bit bigger than the other. These are both in use on the About page.
We also have styles for three-parts which can be found on the homepage with the multi-colored cards.
The three hardest parts of Computer Science are naming things and "off by 1" errors!
Our styles also use some hardcoded widths with the --width-wide and --width-inset CSS variables. Checking in the _variables.scss file shows us that “wide” is 940px and “inset” is 780px, so we know that the elements are going to be at least 780px wide.
We can write a media query that will change the layout width to 100% when the viewport is less than 780px wide. This will make it adjust automatically to any screen width when it gets below that size. We could also switch our CSS Grid utility classes to use display: block; below 780px so they reflow vertically and add a little margin to the content block for good measure:
/* inside _layouts.scss */
@media screen and (max-width: 780px) {
.layout {
width: 100%;
}
[class*='two-parts'] {
display: block;
}
.two-parts-50-50 .content-block {
margin-bottom: 2em;
}
}We can also add some updates for the three-part cards section of the homepage.
At 540px, we can adjust the three cards to turn into a single column instead of being side by side. Then at 420px we’ll switch them to use display: block.
Note: these are arbitrary styling decisions made by adjusting the viewport size and seeing how content reflows. You can choose slightly different styles and still meet similar objectives!
/* inside _layouts.scss */
@media screen and (max-width: 540px) {
.three-parts {
grid-template-columns: none;
grid-template-rows: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 420px) {
.three-parts {
display: block;
}
}
Looking at _home.scss there was already a media query set at a max width of 840px to adjust styling on the body.
We’ll add some styling into this media query to target the header that will change the background-size value to be cover and set a minimum height of 355px:
@media screen and (max-width: 840px) {
/* fix header gap */
.page-home #header {
background-size: cover;
min-height: 355px;
}
.page-home .content-block-wrap img {
margin-bottom: 1em;
}
.page-home .link-block {
margin-top: 0;
}
}After this update, the gap has been closed:
If no changes are shown when refreshing your page, it might be cached. Hold the Shift key when reloading to do a hard refresh.
Fixing the Search Form Layout
CSS Grid is used on the homepage form to lay it out horizontally, no matter the screen size.
Dragging the handles on the side of the responsive window in Chrome DevTools helps us decide where certain breakpoints should happen.
Adding a media query for max-width that targets the form on the homepage will instruct the browser to change it.
At about 640px wide, the form feels a bit tight so we’ll set the media query there. Inside the query we’ll tell the page form with a selector of .page-home .form-wrap to set grid-template-columns to none and grid-template-rows to auto.
This will reflow our form into a column:
@media screen and (max-width: 640px) {
.page-home .form-wrap {
grid-template-columns: none;
grid-template-rows: auto;
}
}After reloading the page, the form will now flow vertically at 640px and below:
Solution Work and Thought Process
In these workshop videos, I provide running commentary as I fix the various layout and content reflow issues we identified by testing browser zoom levels.
Video Transcript
So we've got our meta tag here and we can make some changes to our style sheet to make it reflow much better. So when I'm in my dev tools, now, I still am not really able to zoom this in as much as I would want. But it's behaving differently now. So when I was going between these styles, before I wasn't seeing any action, that's how I was like, wait a minute.
There's something super weird going on with this. And so now this is mimicking more of what we saw when we zoomed away in, and that we're getting horizontal and vertical scrolling. So I've got our page here. This is capturing in a zoomed out view of the problem.
So our big gap our search form is not flowing into one column as well as our three parts down here. So these need to be reset when our screen width is a certain size.
Okay. So some CSS would definitely help and we're getting part of the way there, even with that meta viewport tag that gives us something react to is behaving very strangely without that in there. And so you might find that you come in to make some responsive changes and without this meta viewport, you're like, hold on.
Something is off , there's something really weird here. Double check and see what the meta view port tag is saying, because there's other other. Options that you could put in the content including preventing pension zoom, which is also an accessibility problem. That's under user scalable equals no, we definitely wanna get that off there.
Because it prevents users from zooming in and out which can be very helpful to zoom in on something to be able to see it. So we're set up nicely now to be able to make some changes. So let's figure out what exactly we need to fix so that when we come over to our CSS, we can have things we know what we're actually fixing.
Video Transcript
I think our layout there's some stuff in our layout CSS. So I'm going to use this little select an element button. This is where this comes in handy, cuz our right click is disabled in this device emulator. So we've got a layout class that has a width set and this has a hard coded width.
It uses a CSS variable, but it's setting the width of the page at 780 pixels. We don't really want that anymore. I would say if we're less than 780 pixels wide, we probably wanna change that to be something that's more flexible, like a percentage. And so the goal of that is so that when you're on a desktop monitor at least the default, the way it's set now, when you're on a big desktop size monitor, we wanted to have some sort of a width to inset the design of the webpage so that it's only a certain width wide.
It doesn't go all the way to the edges of this giant monitor. But once we're less than that width, we want it to flow into, more responsive layouts. So perhaps when we're less than 780 pixels wide, we could change that to be a percentage instead. So I could play with this here and say. With a hundred percent.
Wow. Look at that. So that took our search form from being overflowing and having to scroll in two dimensions. It changed it into a single column. Now we might want to go further inside of the settlement and make these form fields drop down into one column, which could be nice so that there's no chance of having to scroll horizontally since we'll be going vertical as well.
But I think our layout element would be a good one to fix. So let's go do that. Let's get, make some action happen. So our layout class, I'm gonna guess it's in this layouts dot SCSS, but a trick that I could show you if I was, I didn't know quite where it was we've searched once before in the code base, I can do command shift F and that gets me over to this search section.
We, we used it earlier to find our outlined nun style. So I could say dot layout. So that will show me all of the places that this layout class is referenced. So I don't really wanna change it in any of the exercise folders. I just wanna find where it exists in the project. So it is in layout or layouts SCSS.
So for this, I could say, I'm gonna put a CSS media query. This will be our first time writing a media query together in this workshop. So let's say we'll drop it down here. And I'll say at media and parentheses screen dash width, and we were gonna say 780 pixels.
It's max width. So media screen and max width, so now we've got the condition set up. So we've got a media query that will match anytime that the screen width is less than 780 pixels inside of that media query.
I need to write a CSS class, to match it. So in our layout, I could say width equals a hundred percent. So that will make that change where we want this CSS variable. It's no longer relevant, cuz we're less than that width. So we're gonna say a hundred percent and then any widths, smaller than that, we will have overridden it.
So looking also at our search form while we're in here, this form has a, I can see this little grid marker here. So CSS grid, page home. So this would be in the home CSS. Uh We could change this display grid, if we're less than 780 pixels wide, we could say display block, and that would change it from CSS grid into a regular block level element where the elements flow top to bottom.
We might need a little extra margin on our search button, but I think layout wise that takes it from side by side. When it's in display grid. Now it goes into one column. We could also fiddle with our display grid settings. And instead if we wanted to keep it as a grid, maybe I could say, keep this as grid, but maybe I could make it grid template, columns.
I could say none. Oh, Hey, look at that kind of works. That keeps all the spacing. So it keeps it as display grid and keeps the gap, the grid gap, but it just zeros up columns. That might be a good way to go because we don't have to go onto any of the child, the submit button and do anything.
We can leverage what we already have written with CSS grid. So that's super cool. So let's go make that change. And while we're in there, we've got, let's figure out where this CSS lives. This might actually be in our same layouts file. So we've got these three parts. So this will inherit the the width of a hundred percent.
And I'm just gonna do a little double checking. I'll hit save so that if I refresh here, we have now flowed a lot better. Wow. That change made a huge difference. So it took all of the elements that have that CSS class of layout now are flowing to be one column. So that's, we're already looking much better with our viewport tag and our viewport meta tag and our little bit of CSS.
Video Transcript
So this three parts is a similar display grid situation let's see what screen width would make sense. So maybe the seven 80, smaller than I'll put this zoom a little bit out, once we get to. I guess about six 40, maybe the, this text starts to get skinny.
So at that point, maybe we wanna change it to go into one column so we can really craft our media queries for responsive and zooming based on the content. So rather than having one screen with meat query to rule them all, we really tailor them to the page content kind of, at each content level.
So for this, we could do a similar technique to our search form that we are, we need to go back in and change that in the code. But down here I could say grid, template columns, none. And we'll wrap that in a media query when I change it here. These do look pretty wide. maybe I do wanna keep 'em as columns until we get to five 40.
Maybe I could turn this off and see, what does it look like around then? Yeah, maybe five 60 wide or five 40 something around there. And then it'll when it, that media query matches it'll flip to be one column. I think that would look pretty great. And our header here that we've got a much easier case to go and see what screen width do we want this to start changing at?
We'll come back to that. So let's go to our code. I'm gonna go to vs code. So within layouts, this is where a lot of our layout classes live. So we've got things like the three parts of those three items that are, that we' sitting side by side. So I'm gonna say that's outta media query. So at media screen and max width, what did I say?
Like five 40 pixels. And then inside of there, I could say three parts grid, template, columns, none. And that will keep this gap of one em between each item. Regardless of whether they're in columns or rows. And so leverage that spacing from display grid, I think that's working really well.
And then we had a change on our homepage that we need to go and make. So I'll go over here to home dot SCSS. The last we worked on this, we were looking at the link list. There is some CSS media query stuff going on already. That's why some of our page content was flowing nicely, but not all of it. So we've got our page home form wrap here's that form that we needed.
So perhaps I could say at media screen and maybe a max width for that, the seven 80, maybe somewhere between six 40 and we can pick arbitrarily what pixel widths we want for our screen sizes. But I could say page home form wrap grid, template columns, none. So now when I go back to the browser and hit refresh on it, this form has flowed into one column and I could potentially do that at a slightly smaller width.
Like as soon as that placeholder text kind of gets cut off, that might be a good place to change the screen width for that. But it's flowing so that we don't need to scroll horizontally, which is awesome. So down here on our three parts, those are flipping into one column and pretty much all we have left now is our header, which needs to change so page..
Video Transcript
So for the screen width of this, it starts looking weird around so second it doesn't overlap anymore. So it's like around I'll say a thousand cuz part of the design was that it was overlapping the form and the header image. So of right around there, when it's less than that, we wanna change the way that this works so that this background image maybe doesn't have a min height anymore.
We could say, we can also play with the background image size. So it's got a background size of contain right now. If I change that to background size cover, that starts to look a little bit better actually. So then it's so we wanted contain when we were fully, going to a full screen width cover might not behave the way that we want, but once we're going into a responsive width, having cover for the background image size means that it will scale proportionately with this kind of limited screen width.
So as I zoom in. It's working better. It's still giving a lot of real estate to this image. So perhaps my min height, it's nice having some, I we don't want the image to completely disappear, but got some kind of stylistic choices to make here. So for our image, So we've seen some action happen with our header. Yeah. I think we're really on the right track. So changing the background size and maybe changing the min height to be slightly less like maybe 355 pixels. Then when I zoom in, I get a little bit of the image and it stops. It won't zoom anymore after a certain level.
So a good, let's say maybe by eight 40 right around there is where we could make that change. That sounds pretty good.
Okay. So I'm gonna go over to our home CSS and the selector that we're gonna need is the page home header. So we're gonna override some of the style when the screen width is less than 840 pixels wide. So we are on our home. We've got our page home header. I'm gonna say media screen and max width, eight 40 PX.
And I'll say page dash home header, background dash size cover instead of contain. So in our CSS, these are all split apart into separate lines. Parcel was combining them in its CSS compilation so that they were all in one line, but they looked slightly different in our CSS file. So we'll change that to background size cover, and then change min height.
We'll cut that in half about, say 3 55, I guess that's not quite half, but it's smaller. So we're making that real estate we're devoting to this header much smaller but still somewhat scalable. So it's a kind of a minimum height. It won't get any smaller than that, but it will yeah, reduce the amount of space that we're giving to that image.
So let's come back to our browser. So when I scroll in, there is a little bit of a jump between the two. So it's not terrible. We've got a little bit of space when we're zooming in and out where there's a little bit of a gap between the top of the form and the header image. I think it's okay.
Video Transcript
Nobody's gonna be like zooming in and out to get the nerd vote as I call it when we're doing this responsive stuff, it's mostly when you're zooming in, when you're looking at it on mobile device, what is the screen size looking like? So what I'm gonna do so I can validate my styles on a smaller view port device, which I think is really handy. I'm on the same network between my home wifi and on my mobile device.
They're on the same wifi network. what I can do is come over to my system preferences, go look at network, figure out what my IP address is.
So this IP address on my network is Um I can probably set a name for my machine too, if I want to go and look at that, but here's what I wanna show you.
So I've got our local host pulled up on my local device. I can go over here to my phone, which I call kitten mittens, and I can go to this safari local host URL. And the cool thing is that I can actually inspect. So while I'm zooming in here, I can go and inspect in the dev tools on my device, which I find to be really useful.
So if I'm checking, how does this actually render on a mobile device? Go look at if there's any peculiar things happening in the dev tools. This web inspector is highlighting stuff on the phone itself. So for responsive debugging that can be really handy. As long as your phone software is up to date you can actually plug it in.
one little. Gotcha. I will tell you under safari preferences, you need this under advanced. So I'm all the way over here on the right in the safari settings. There is this show develop menu in the menu bar. That is how I get. Develop menu up here. And then any device when you've got the browser open you can target those browser windows and open up this web inspector.
All right. So that's super handy when you're doing responsive testing, but everything was looking really good. The styles looked great. We've done a lot of CSS styling for magnification and zoom.
Video Transcript
So I'm gonna turn off the device emulator in Chrome and I'll do command plus now to zoom in. And that is looking so much better when I zoom in our header height shrinks.
So not quite so much real estate for that if I really wanted to as well, I could change the positioning of this header image. So maybe it's anchored on the bottom. So the tens show in the image, but not super important. I think more importantly, our content is flowing so that we are not being forced to scroll horizontally anymore.
CSS grid is just awesome how we can use that grid gap. Even when we de decide to turn our columns off. If I scroll down further, we've got some content, it still fits. So if I zoomed in another level, it would then flip to a single column. So using good old CSS media queries for responsive design, we can make magnification in zoom so much better and really improve the situation to meet reflow, which is one of the web content accessibility guidelines, success criteria.
So yeah, a little bit of responsive design to add to your toolbox. And as I mentioned, the approach that I think works uh really well is to approach your screen widths and your CSS media queries on a content level basis. So for each component, like the nav MegaNav has its own screen widths that might work best for the content.
As we scroll down, different components, different areas of the site, let them have their own screen widths to adapt to cuz that can make it really nicely flexible. And so content's not trying to all work at the same view port size, cuz it'll differ depending on where the content stops fitting what screen widths, what magnification levels sweet.
So zooming in, yeah. Try zooming in, on your websites and projects and see, does anything break, do you end up having to horizontally scroll when you didn't mean to? It can be really helpful to, to check that periodically.
Video Transcript
So in terms of like frequency of this kind of pass on the workflow. I would say keyboard and dev tools and extensions.
I use every single day. Depending on what I'm building, like if I'm on the same components for most of a week or a couple weeks, I might check magnification, like it's less frequent. I would say, cuz I'm not always writing code that would affect it. So if I'm doing a lot of CSS, heavy layout tasks, like I'm taking it from a design to producing something, that's actually, brought to life with code.
If I'm doing a lot of layout stuff, I might be doing magnification testing at that time. So it depends what you're working on. But I would say that I test this zoom level stuff slightly less often than I would. Other things we've looked at so far like keyboard and extension testing and things, but it's still important because as we saw, when we zoomed in, it was not great.
The big gaps in the layout things making us horizontally and vertically scroll at the same time. Like it's a nightmare. So if we're catching that periodically, like at least, once a week or once every couple weeks, we can hopefully catch some of these layout issues before they become technical debt.
That becomes too hard to fix. So the earlier you can test it for layout type work, the better off you'll be. So that's magnification. We made some good changes in not a whole lot of time.